<!doctype html>
<html>
	<head>
		<title>youjoin web</title>
		<meta name="viewport" content="width=device-width, initial-scale=1" />
		<meta name="charset" content="UTF-8">
		<link rel="stylesheet" type="text/css" href="Css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="Css/index.css" id="selectcss">
		<script type="text/javascript" src="Js/jquery.min.js"></script>
		<script type="text/javascript" src="Js/youjoin.js"></script>
	</head>
	<body>
		<div id="loader-wrapper">
            <div id="loader"></div>
        </div>
		<div class="first_page">
			<img src="Img/youjoin_bg1.jpg">
			<header><img class="menu" src="Img/menu.png"></header>
			<div class="login_box">
				<div class="people_img"><img src="Img/people.png"></div>
				<div class="login_inputs">
					<input type="text" value="user name">
					<input type="password" value="password">
				</div>
				<div class="login_btns">
					<div>
						<button class="sign">sign up</button><button class="login">login</button>
					</div>
				</div>
			</div>
			<div class="youjoin">
				<div>
					<img src="Img/youjoin.png">
					<div>
						<img src="Img/youjoin1.png">
					</div>
				</div>
			</div>
			<div class="life">
				<div class="circle_png">
					<div>
					</div>
				</div>
				<span>YouJoin You Life</span>
			</div>
			<div class="friend">
				<div class="circle_png">
					<div>
					</div>
				</div>
				<span>Share with your friend</span>
			</div>
			<div class="alone">
				<div class="circle_png">
					<div>
					</div>
				</div>
				<span>You are not alone</span>
			</div>
		</div>
		<div class="introduce">
			<div class="inttitle">YouJoin your own life</div>
			<div class="intcontent">
				<p>Search for beautiful scenery , and take a photo , share the wonderful moments with your friends</p>
				<p>We are not alone in the world . Every second , a miracle will happen </p>
				<p>Share the moments that touch you</p>
			</div>
		</div>
		<div class="sign_button">
			<button><img src="Img/signbtn.png"></button>
		</div>
		<div class="youjoin_imgs">
			<div class="img_dispaly">
				<div class="img1">
					<img src="Img/road.jpg">
					<img src="Img/reading.jpg">
				</div>
				<div class="img2">
					<img src="Img/share.jpg">
					<img src="Img/yourself.jpg">
				</div>
			<!-- 	<div class="img5">
					<img src="Img/5.jpg">
				</div> -->
			</div>
		</div>
		<div class="phone_display">
			<div class="img">
				<img src="Img/phone2.png">
			</div>
			<div class="img">
				<img src="Img/phone1.png">
			</div>
			<div class="img">
				<img src="Img/phone3.png">
			</div>
		</div>
		<div class="download">
			<div>
				<p>Share your wonderful time easily</p>
				<p>Download the APP</p>
			</div>
			<div class="downbtn">
				<button><a href="http://localhost/youjoin/youjoin_server/admin/plugin/root/v1.0_pintu.zip"><img src="Img/IOS.png"></a></button>
				<button><a href="http://localhost/youjoin/youjoin_server/admin/plugin/root/v1.0_pintu.zip"><img src="Img/Android.png"></a></button>
			</div>
		</div>
		<div class="youjoinfoot">
			<div class="foot1">
				<ul>
					<li>Account</li>
					<li>Manage YouJoin ID </li>
					<li>Setting Information</li>
				</ul>
			</div>
			<div class="foot2">
				<ul>
					<li>YouJoin Culture</li>
					<li>Our values</li>
					<li>Dream</li>
					<li>Goal</li>
				</ul>
			</div>
			<div class="foot3">
				<ul>
					<li>About YouJoin</li>
					<li>YouJoin Info</li>
					<li>Job Opportunities</li>
					<li>News</li>
					<li>Legal</li>
					<li>Contact</li>
				</ul>
			</div>
		</div>
		<div class="foot-bottom">
			<span>Copyright © 2016 YouJoin Inc. All rights reserved.</span>
			<div class="foot-nav">
				<ul>
					<li>Privacy Policy</li>
					<li><hr/></li>
					<li>Terms of Use</li>
					<li><hr/></li>
					<li>Site Map</li>
				</ul>
			</div>
		</div>
		<!-- // <script type="text/javascript" src="Js/appindex.js" id="selectjs"></script> -->
		<script type="text/javascript"> 
			var type=youjoin.typedev;
			switch(type){
				case "web":
					// $('#selectjs').attr("src","Js/index.js");
					// $('#selectjs').attr("src","Js/index.js");
					document.write("<script src='Js/index.js'><\/script>"); 
					break;
				case "phone":
					$('#selectcss').attr("href","Css/appindex.css");
					// $('#selectjs').attr("src","Js/appindex.js");
					document.write("<script src='Js/appindex.js'><\/script>"); 
					break;
				default:
					console.log("device wrong");
			}
			$(window).load(function() { // makes sure the whole site is loaded
                $('#loader').fadeOut(); // will first fade out the loading animation
                    $('#loader-wrapper').delay(350).fadeOut('slow'); // will fade out the white DIV that covers the website.
                $('body').delay(350).css({'overflow-y':'visible'});
            });
		</script>
	</body>
</html>